<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>拟物时钟</title>
    <link rel="stylesheet" href="index.css">
    <style>
        /*底座*/

        .bg {
            width: 400px;
            height: 400px;
            margin: 50px auto;
            background: linear-gradient(to bottom, skyblue 0%, #29b2ea 100%);
            border-radius: 20%;
            box-shadow: 2px 2px 25px rgba(255, 255, 255, .5) inset, 20px 20px 40px #7fdaff inset, -10px -10px 30px rgba(0, 0, 50, .3) inset, -20px -20px 40px #16a5df inset, 10px 25px 40px -10px rgba(0, 0, 0, .5);
        }
    </style>
</head>

<body>
    <div class="bg">
        <div class="clock">
            <div class="hour" id="h"></div>
            <div class="min" id="m"></div>
            <div class="sen" id="s">
                <span class="black"></span>
                <span class="red"></span>
            </div>
        </div>
    </div>

</body>
<script>
    // 获取时分秒
    var s = document.getElementById('s');
    var m = document.getElementById('m');
    var h = document.getElementById('h');
    function getSecond() {
        var date = new Date();
        // 获取毫秒
        var hs = date.getMilliseconds();
        // 获取秒(秒针每秒旋转6°)
        var ss = date.getSeconds() + hs / 1000;
        s.style.transform = 'rotate(' + ss * 6 + 'deg)';
        // 获取分钟(分钟每分钟旋转6°)
        var mm = date.getMinutes() + ss / 60;
        m.style.transform = 'rotate(' + mm * 6 + 'deg)';
        // 获取时(时针每小时旋转30°)
        var hh = date.getHours() + mm / 60;
        h.style.transform = 'rotate(' + hh * 30 + 'deg)';
    }
    getSecond();
    setInterval(getSecond, 1000);

</script>

</html>